<script setup>
import { ref, reactive } from 'vue';

const spot1 =ref(
  {
    co:0.1,
    somke:0.2,
    temper:40,
    isfire:'无'

  }
)
const spot2 =ref(
  {
    co:0.1,
    somke:0.2,
    temper:40,
    isfire:'无'

  }
)

const spot3 =ref(
  {
    co:0.1,
    somke:0.2,
    temper:40,
    isfire:'无'

  }
)

const spot4 =ref(
  {
    co:0.1,
    somke:0.2,
    temper:40,
    isfire:'无'

  }
)

const spot5 =ref(
  {
    co:0.1,
    somke:0.2,
    temper:40,
    isfire:'无'

  }
)


const activeTooltip = reactive({
  id: null,
  x: 0,
  y: 0
});

const showTooltip = (id, event) => {
  // 获取点元素的位置和尺寸
  const dotElement = event.currentTarget; // 或者用 ref 更精确
  const rect = dotElement.getBoundingClientRect();

  // 计算提示框位置（点右侧显示）
  activeTooltip.id = id;
  activeTooltip.x = rect.left + rect.width + 10; // 点右侧偏移10px
  activeTooltip.y = rect.top; // 与点顶部对齐

  // 或者更精确的方式（推荐）：
  // 如果使用ref获取点元素：
  // activeTooltip.x = dotRef.value.offsetLeft + dotRef.value.offsetWidth + 10;
  // activeTooltip.y = dotRef.value.offsetTop;
};

const hideTooltip = () => {
  activeTooltip.id = null;
};
</script>

<template>
  <div class="cockpit">
    <div class="content">
      <div class="house">
        <!-- 添加房间结构 -->
        <div class="top">
          <div class="part1 ">
            <div class="p1">

            </div>
            <div class="p2">

            </div>
            <div class="p3">

            </div>
          </div>
          <div class="part2">
            <div class="p1">

            </div>
            <div class="p2">

            </div>
            <div class="p3">

            </div>
          </div>
          <div class="part3">
            <div class="p1">

            </div>
            <div class="p2">

            </div>
            <div class="p3">

            </div>
          </div>
          <div class="part4">
            <div class="p1">

            </div>
            <div class="p2">

            </div>
            <div class="p3">

            </div>
          </div>
        </div>

        <div class="middle">

        </div>

        <div class="bottom">
          <div class="b-part1">
            <div class="p-1-top">
              <div class="p-1-top1 ">
                <div class="p1">

                </div>
                <div class="p2 relative-pos">
                  <div class="marker-dot" @mouseenter="showTooltip('part1', $event)" @mouseleave="hideTooltip"></div>

                  <!-- 提示框（相对于点定位） -->
                  <div v-if="activeTooltip.id === 'part1'" class="tooltip" :style="{
                    left: activeTooltip.x + 'px',
                    top: activeTooltip.y + 'px'
                  }">
                    <h4>点1</h4>
                    <p>红外:{{ spot1.isfire }} </p>
                    <p>温度:{{ spot1.temper }} </p>
                    <p>烟雾浓度:{{ spot1.somke }} </p>
                    <p>co浓度: {{ spot1.part2 }}</p>
                  </div>
                </div>
                <div class="p3">

                </div>
              </div>
              <div class="p-1-top2">
                <div class="p1">

                </div>
                <div class="p2">

                </div>
                <div class="p3">

                </div>
              </div>
            </div>
            <div class="p-1-middle">

            </div>
            <div class="p-1-bottom">
              <div class="p-1-b1">
                <div class="p1">

                </div>
                <div class="p2">

                </div>
                <div class="p3">

                </div>
              </div>
              <div class="p-1-b2">
                <div class="p1">

                </div>
                <div class="p2">

                </div>
                <div class="p3">

                </div>
              </div>
            </div>
          </div>
          <div class="b-part2 relative-pos">
            <div class="marker-dot" @mouseenter="showTooltip('part2', $event)" @mouseleave="hideTooltip"></div>

            <!-- 提示框（相对于点定位） -->
            <div v-if="activeTooltip.id === 'part2'" class="tooltip" :style="{
              left: activeTooltip.x + 'px',
              top: activeTooltip.y + 'px'
            }">
              <h4>点2</h4>
            <p>红外:{{ spot2.isfire }} </p>
                    <p>温度:{{ spot2.temper }} </p>
                    <p>烟雾浓度:{{ spot2.somke }} </p>
                    <p>co浓度: {{ spot2.part2 }}</p>
            </div>
          </div>
          <div class="b-part3">
            <div class="p3-top ">
              <div class="p3-top1 ">
                <div class="p1">

                </div>
                <div class="p2">

                </div>
                <div class="p3">

                </div>
              </div>
              <div class="p3-top2 ">
                <div class="p1 relative-pos">
                  <div class="marker-dot" @mouseenter="showTooltip('part3', $event)" @mouseleave="hideTooltip"></div>

                  <!-- 提示框（相对于点定位） -->
                  <div v-if="activeTooltip.id === 'part3'" class="tooltip" :style="{
                    left: activeTooltip.x + 'px',
                    top: activeTooltip.y + 'px'
                  }">
                    <h4>点3</h4>
                   <p>红外:{{ spot3.isfire }} </p>
                    <p>温度:{{ spot3.temper }} </p>
                    <p>烟雾浓度:{{ spot3.somke }} </p>
                    <p>co浓度: {{ spot3.part2 }}</p>
                  </div>
                </div>
                <div class="p2 relative-pos">
                  <div class="marker-dot" @mouseenter="showTooltip('part4', $event)" @mouseleave="hideTooltip"></div>

                  <!-- 提示框（相对于点定位） -->
                  <div v-if="activeTooltip.id === 'part4'" class="tooltip" :style="{
                    left: activeTooltip.x + 'px',
                    top: activeTooltip.y + 'px'
                  }">
                    <h4>点4</h4>
                  <p>红外:{{ spot4.isfire }} </p>
                    <p>温度:{{ spot4.temper }} </p>
                    <p>烟雾浓度:{{ spot4.somke }} </p>
                    <p>co浓度: {{ spot4.part2 }}</p>
                  </div>
                </div>
                <div class="p3">

                </div>
              </div>
            </div>
            <div class="p3-middle ">
              <div class="p3-middle1">
                <div class="p3-m11">
                  <div class="p1">

                  </div>
                  <div class="p2">

                  </div>
                  <div class="p3">

                  </div>
                </div>
                <div class="p3-m12">

                </div>
              </div>
              <div class="p3-middle2">
                <div class="p3-m21">
                  <div class="p1 relative-pos">
                    <div class="marker-dot" @mouseenter="showTooltip('part5', $event)" @mouseleave="hideTooltip"></div>

                    <!-- 提示框（相对于点定位） -->
                    <div v-if="activeTooltip.id === 'part5'" class="tooltip" :style="{
                      left: activeTooltip.x + 'px',
                      top: activeTooltip.y + 'px'
                    }">
                      <h4>点5</h4>
                     <p>红外:{{ spot5.isfire }} </p>
                    <p>温度:{{ spot5.temper }} </p>
                    <p>烟雾浓度:{{ spot5.somke }} </p>
                    <p>co浓度: {{ spot5.part2 }}</p>
                    </div>
                  </div>
                  <div class="p2">

                  </div>
                  <div class="p3">

                  </div>

                </div>
                <div class="p3-m22">

                </div>
                <div class="p3-m23">
                  <div class="p1">

                  </div>
                  <div class="p2">

                  </div>
                  <div class="p3">

                  </div>
                </div>
              </div>
            </div>
            <div class="p3-bottom">
              <div class="p3-bottom1">

              </div>
              <div class="p3-bottom2">

              </div>
            </div>
          </div>
        </div>


      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.cockpit {
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(239, 239, 239);
  padding: 20px;
  box-sizing: border-box;
}

.content {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

}

.house {
  width: 1920px;
  height: 1080px;
  border: 2px solid black;
  position: relative;
  background-color: #8b4513;
opacity: 0.8;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;


  .top {
    width: 100%;
    height: 30%;
    border: 10px ridge black;
    border-bottom: none;
    display: flex;
    flex-direction: row;
    background-color: white;

    .part1 {
      flex: 1 0 0%;
      border: 10px ridge black;
      border-bottom: none;
      display: flex;
      flex-direction: row;

      .p1 {
        flex: 4 0 0%;
        border-bottom: 10px ridge black;

      }

      .p2 {
        flex: 2 0 0%;

      }

      .p3 {
        flex: 4 0 0%;
        border-bottom: 10px ridge black;
      }
    }

    .part2 {
      flex: 1 0 0%;
      border: 10px ridge black;
      border-bottom: none;
      display: flex;
      flex-direction: row;

      .p1 {
        flex: 4 0 0%;
        border-bottom: 10px ridge black;

      }

      .p2 {
        flex: 2 0 0%;

      }

      .p3 {
        flex: 4 0 0%;
        border-bottom: 10px ridge black;
      }
    }

    .part3 {
      flex: 1 0 0%;
      border: 10px ridge black;
      border-bottom: none;
      display: flex;
      flex-direction: row;

      .p1 {
        flex: 4 0 0%;
        border-bottom: 10px ridge black;

      }

      .p2 {
        flex: 2 0 0%;

      }

      .p3 {
        flex: 4 0 0%;
        border-bottom: 10px ridge black;
      }

    }

    .part4 {
      flex: 1 0 0%;
      border: 10px ridge black;
      border-bottom: none;
      display: flex;
      flex-direction: row;

      .p1 {
        flex: 4 0 0%;
        border-bottom: 10px ridge black;

      }

      .p2 {
        flex: 2 0 0%;

      }

      .p3 {
        flex: 4 0 0%;
        border-bottom: 10px ridge black;
      }
    }
  }

  .middle {
    width: 100%;
    height: 10%;
    border-left: 10px ridge black;
    border-right: 10px ridge black;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: flex-end;
  }

  .bottom {
    width: 100%;
    height: 60%;
    border: 10px ridge black;
    border-top: none;
    display: flex;
    flex-direction: row;

    .b-part1 {
      flex: 4 0 0%;
      display: flex;
      flex-direction: column;

      .p-1-top {
        flex: 3 0 0%;
        display: flex;

        .p-1-top1 {
          flex: 6 0 0%;
          border-left: 10px ridge black;
          border-right: 10px ridge black;
          background-color: white;
          display: flex;
          flex-direction: row;

          .p1 {
            flex: 4 0 0%;
            border-bottom: 10px ridge black;
            border-top: 10px ridge black;
          }

          .p2 {
            flex: 2 0 0%;
            position: relative;

            .marker-dot {
              position: absolute;
              top: 50%;
              left: 50%;
              width: 40px;
              height: 40px;
              background-color: #ff7f50;
              border-radius: 50%;
              transform: translate(-300%, -250%);
              border: 1px solid #8b4513;
              cursor: pointer;
              z-index: 10;

              /* 鼠标悬浮时高亮 */
              &:hover {
                box-shadow: 0 0 0 2px rgba(255, 127, 80, 0.5);
              }
            }
          }

          .p3 {
            flex: 4 0 0%;
            border-bottom: 10px ridge black;
            border-top: 10px ridge black;
          }
        }

        .p-1-top2 {
          flex: 4 0 0%;
          display: flex;
          flex-direction: row;

          .p1 {
            flex: 4 0 0%;

            border-top: 10px ridge black;
          }

          .p2 {
            flex: 2 0 0%;

          }

          .p3 {
            flex: 4 0 0%;

            border-top: 10px ridge black;
          }
        }
      }

      .p-1-middle {
        flex: 1 0 0%;
      }

      .p-1-bottom {
        flex: 6 0 0%;
        border: 10px ridge black;
        border-top: none;
        display: flex;
        background-color: white;

        .p-1-b1 {
          flex: 1 0 0%;

          display: flex;
          flex-direction: row;

          .p1 {
            flex: 4 0 0%;

            border-top: 10px ridge black;
          }

          .p2 {
            flex: 2 0 0%;

          }

          .p3 {
            flex: 4 0 0%;

            border-top: 10px ridge black;
          }
        }

        .p-1-b2 {
          flex: 1 0 0%;
          border: 10px ridge black;
          border-top: none;
          display: flex;
          flex-direction: row;

          .p1 {
            flex: 4 0 0%;

            border-top: 10px ridge black;
          }

          .p2 {
            flex: 2 0 0%;

          }

          .p3 {
            flex: 4 0 0%;

            border-top: 10px ridge black;
          }
        }
      }
    }

    .b-part2 {
      flex: 1 0 0%;
      border-top: 10px ridge black;
      position: relative;

      .marker-dot {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 40px;
        height: 40px;
        background-color: #ff7f50;
        border-radius: 50%;
        transform: translate(200%, -800%);
        border: 1px solid #8b4513;
        cursor: pointer;
        z-index: 10;

        /* 鼠标悬浮时高亮 */
        &:hover {
          box-shadow: 0 0 0 2px rgba(255, 127, 80, 0.5);
        }
      }
    }

    .b-part3 {
      flex: 5 0 0%;
      display: flex;
      flex-direction: column;

      .p3-top {
        flex: 3 0 0%;
        display: flex;

        .p3-top1 {
          flex: 5 0 0%;

          display: flex;
          flex-direction: row;

          .p1 {
            flex: 4 0 0%;

            border-top: 10px ridge black;
          }

          .p2 {
            flex: 2 0 0%;

          }

          .p3 {
            flex: 4 0 0%;

            border-top: 10px ridge black;
          }
        }

        .p3-top2 {
          flex: 5 0 0%;
          background-color: white;
          border-left: 10px ridge black;
          border-right: 10px ridge black;
          display: flex;
          flex-direction: row;

          .p1 {
            flex: 4 0 0%;
            border-bottom: 10px ridge black;
            border-top: 10px ridge black;
            position: relative;

            .marker-dot {
              position: absolute;
              top: 50%;
              left: 50%;
              width: 40px;
              height: 40px;
              background-color: #ff7f50;
              border-radius: 50%;
              transform: translate(-270%, 0%);
              border: 1px solid #8b4513;
              cursor: pointer;
              z-index: 10;

              /* 鼠标悬浮时高亮 */
              &:hover {
                box-shadow: 0 0 0 2px rgba(255, 127, 80, 0.5);
              }
            }
          }

          .p2 {
            flex: 2 0 0%;
            position: relative;

            .marker-dot {
              position: absolute;
              top: 50%;
              left: 50%;
              width: 40px;
              height: 40px;
              background-color: #ff7f50;
              border-radius: 50%;
              transform: translate(200%, -250%);
              border: 1px solid #8b4513;
              cursor: pointer;
              z-index: 10;

              /* 鼠标悬浮时高亮 */
              &:hover {
                box-shadow: 0 0 0 2px rgba(255, 127, 80, 0.5);
              }
            }
          }

          .p3 {
            flex: 4 0 0%;
            border-bottom: 10px ridge black;
            border-top: 10px ridge black;
          }
        }
      }

      .p3-middle {
        flex: 4 0 0%;
        display: flex;
        flex-direction: column;
        background-color: white;

        .p3-middle1 {
          flex: 3 0 0%;
          display: flex;
          flex-direction: row;


          .p3-m11 {
            flex: 4 0 0%;

            border-right: 10px ridge black;
            border-left: 10px ridge black;
            display: flex;
            flex-direction: row;

            .p1 {
              flex: 4 0 0%;

              border-top: 10px ridge black;
            }

            .p2 {
              flex: 2 0 0%;

            }

            .p3 {
              flex: 4 0 0%;

              border-top: 10px ridge black;
            }
          }

          .p3-m12 {
            flex: 6 0 0%;
          }
        }

        .p3-middle2 {
          flex: 7 0 0%;
          display: flex;
          flex-direction: row;

          .p3-m21 {
            flex: 4 0 0%;

            border-left: 10px ridge black;
            display: flex;
            flex-direction: row;

            .p1 {
              flex: 4 0 0%;

              border-bottom: 10px ridge black;
              position: relative;

              .marker-dot {
                position: absolute;
                top: 50%;
                left: 50%;
                width: 40px;
                height: 40px;
                background-color: #ff7f50;
                border-radius: 50%;
                transform: translate(-240%, -150%);
                border: 1px solid #8b4513;
                cursor: pointer;
                z-index: 10;

                /* 鼠标悬浮时高亮 */
                &:hover {
                  box-shadow: 0 0 0 2px rgba(255, 127, 80, 0.5);
                }
              }
            }

            .p2 {
              flex: 2 0 0%;

            }

            .p3 {
              flex: 4 0 0%;

              border-bottom: 10px ridge black;
            }
          }

          .p3-m22 {
            flex: 1 0 0%;
            border-right: 10px ridge black;
            border-top: 10px ridge black;
          }

          .p3-m23 {
            flex: 5 0 0%;
            display: flex;
            flex-direction: row;

            .p1 {
              flex: 4 0 0%;

              border-bottom: 10px ridge black;
            }

            .p2 {
              flex: 2 0 0%;

            }

            .p3 {
              flex: 4 0 0%;

              border-bottom: 10px ridge black;
            }
          }
        }
      }

      .p3-bottom {
        flex: 3 0 0%;
        display: flex;
        background-color: white;

        .p3-bottom1 {
          flex: 1 0 0%;
          border: 10px ridge black;
          border-top: none;
        }

        .p3-bottom2 {
          flex: 1 0 0%;
          border: 10px ridge black;
          border-top: none;
        }
      }
    }
  }
}

.relative-pos {
  position: relative;
}

/* 提示框样式（同之前） */
.tooltip {
  position: fixed;
  /* 改用fixed避免页面滚动影响 */
  /* 或者保持absolute，但确保父容器relative */
  background-color: white;
  color: black;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 14px;
  z-index: 100;
  pointer-events: none;
  max-width: 200px;
  white-space: nowrap;
  transform: translateY(-50%);
  /* 垂直居中调整 */
  opacity: 50%;
}
</style>